/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-04 13:32:03
 * @LastEditTime : 2023-08-08 08:34:23
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Templates\SixTwo.jsx
 * @Description  :
 */
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { PageTopSelect } from '../Template'

import { SixTwoNavData, FouOneImgOne, FouOneImgTwo, SixTwoListData } from '../Data'
import { useState } from 'react'

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

const ImageTemplate = ({ number, data }) => {
    return (
        <div className="Image">
            <div className="List">
                {data.map(({ uuid, img, label, value, unit }) => (
                    <div key={uuid} style={{ width: `calc(100% / ${number} )` }}>
                        <img src={imageUrl + img} alt="" />
                        <div>
                            <div>{label}</div>
                            <div>
                                {value} <span>{unit}</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

const ListTemplate = ({ Top }) => {
    return (
        <div className="List">
            <div>
                {Top.map(({ uuid, label }) => (
                    <div key={uuid}>{label}</div>
                ))}
            </div>
            <div>
                {SixTwoListData.map(({ uuid, one, two, thr }) => (
                    <div key={uuid}>
                        <div>{one}</div>
                        <div>{two}</div>
                        <div>{thr}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

const TopOne = [
    { uuid: 1, label: '设备编号' },
    { uuid: 2, label: '在线状态' },
    { uuid: 3, label: '报警状态' },
]

const TopTwo = [
    { uuid: 1, label: '设备编号' },
    { uuid: 2, label: '在线状态（左）' },
    { uuid: 3, label: '在线状态（右）' },
]

export const SixTwo = () => {
    const [active, setActive] = useState(1)
    return (
        <>
            <PageTopSelect />
            <div className="Nav">
                {SixTwoNavData.map(({ uuid, label }) => (
                    <div key={uuid} onClick={() => setActive(uuid)} className={active === uuid ? 'active' : ''}>
                        {label}
                    </div>
                ))}
            </div>
            <CommonSmallTitle title="龙门吊" style={{ marginRight: 16 }}>
                <ImageTemplate number={3} data={FouOneImgOne} />
                <ListTemplate Top={TopOne} />
            </CommonSmallTitle>
            <CommonSmallTitle title="升降机">
                <ImageTemplate number={4} data={FouOneImgTwo} />
                <ListTemplate Top={TopTwo} />
            </CommonSmallTitle>
        </>
    )
}
